<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="cn.com.dhcc.app.core.CoreEnv.CoreInitCtx"%>
<%@page import="cn.com.dhcc.ddi.datasource.vo.TableInfoVo" %>
<%@ page import="cn.com.dhcc.ddi.task.service.transform.FunctionAction" %>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<%@ include file="/WEB-INF/view/common/css_js_ztree.jsp"%>
<script type="text/javascript" src="${ctx}/static/js/ddi/datamapping/datamapping.js"></script>
<script type="text/javascript">
var realTimeData = "";
$(function(){
	var mappingType = '${vo.mappingType}';
	if(mappingType == '1'){
		realTimeData = ${tableMappingMap};
		parseRealTimeData();
	}else{
		$("#realTimePreviewBtn").css("display","none");
		$("#realTimePreview").css("display","none");
	}
    parent.setIframeHeight(parent.document.getElementById("content"));//设置iframe高度
	$(window).bind('beforeunload', function() {
		if (isExit) {
			return '您输入的内容尚未保存，确定离开此页面吗？';
		}
	});
});

function updateBtn(){
	sbmMappingRuleInfo();
	
	$(function() {
		$('#inputForm input').tooltip();
		$('#inputForm').checkForm();
		$('#inputForm').ajaxForm({
			url : _ctx + "/data_mapping/update_data_mapping.do",
			type : "POST",
			dataType : "json",
			beforeSubmit : function() {
				$("#sbmBtn").html("处理中...")
						.attr("disabled", "disabled");
			},
			data: {
				funcMappingList:JSON.stringify(mappingRuleList)
			},
			success : function(resp) {
				if (resp.status == '1') {
					isExit = false;
					parent.ui.msg(resp.msg, 1);
					ui.go(_ctx + '/data_mapping/data_mapping_list.do');
				} else {
					$("#sbmBtn").html("提交").removeClass("disabled")
							.attr("disabled", null);
					parent.ui.msg(resp.msg, 0);
				}
				$("#sbmBtn").html("提交").removeClass("disabled").attr(
						"disabled", null);
			},
			error : function(resp) {
				parent.ui.msg('请求发送失败', 0);
				$("#sbmBtn").html("提交").removeClass("disabled").attr(
						"disabled", null);
			}
		});
	});
}   
</script>
<style type="text/css">
.label.arrowed-nn-right:after {
    right: -9.4px;
    border-width: 10px 5px;
}
</style>
<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> 首页</li>
						<li>数据源映射管理</li>
						<li class="active">修改</li>
					</ul>
				</div>
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box">
								<div class="widget-header widget-header-flat">
									<div class="widget-toolbar no-border">
										<a class="btn btn-primary btn-xs"
											href="${ctx}/data_mapping/data_mapping_list.do"> <i
											class="icon-arrow-left"></i> 返回&nbsp;&nbsp;
										</a>
									</div>
								</div>
							    <div class="widget-body">
									<div class="widget-main">
										<form class="form-horizontal" role="form" id="inputForm"
											action="" method="post">
											&nbsp;&nbsp;&nbsp;&nbsp;<span class="label label-primary arrowed-right arrowed-nn-right" >映射基本信息</span>
											<div class="profile-user-info profile-user-info-striped mg-top12">
											    <div class="profile-info-row" style="height: 40px;">
											        <input type="text" name="id" id="mappingId" hidden="true" value="${vo.id}">
													<div class="profile-info-name" style="padding-top:10px;">映射名称*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<input type="text" class="col-xs-10 col-sm-5" name="mappingName"
															id="mappingName" title="必填项,映射名称" placeholder="请输入映射名称"
															datatype="require|ajax|safeString2" value="${vo.mappingName}" oldValue="${vo.mappingName}" msg="请输入映射名称|已经被占用|不允许输入特殊字符"
															require="true" maxlength="200" url="${ctx}/data_mapping/is_mappingName_unique.do"/>	
													</div>
												</div>
												<div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top: 10px;">选择映射类型*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<input type="radio" id="mappingType" name="mappingType" value="1" <c:if test='${vo.mappingType eq 1}'>checked="checked"</c:if> onclick="changeMpTypeRadio()">结构化数据<-->结构化数据&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														<!-- 现在只用结构化到结构化的，其他类型的后期可能会用 --> 
														<%-- <input type="radio" id="mappingType" name="mappingType" value="2" <c:if test='${vo.mappingType eq 2}'>checked="checked"</c:if> onclick="changeMpTypeRadio()">结构化数据<-->非结构化数据&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio" id="mappingType" name="mappingType" value="3" <c:if test='${vo.mappingType eq 3}'>checked="checked"</c:if> onclick="changeMpTypeRadio()">非结构化数据<-->非结构化数据 --%>
													</div>
												</div>
												<div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top: 10px;" >源端数据源*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<select class="col-xs-10 col-sm-5" name="srcDsId" id="srcDsId" datatype="require" msg="请选择源端数据源" require="true" onchange="changeSrcDs()">
															<option value="">-请选择源端数据源-</option>
															<c:forEach items="${dsData}" var="dsVo">
															 <option value="${dsVo.id}" dsType="${dsVo.type}" <c:if test='${dsVo.id eq vo.srcDsId}'>selected</c:if> <c:if test="${vo.mappingType eq 1 &&dsVo.type ne 1 ||vo.mappingType eq 3 &&dsVo.type ne 2}">style="display: none;"</c:if> >${dsVo.name}</option>
															</c:forEach>
														</select>
													</div>
												</div>
												<div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top: 10px;" >目的端数据源*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<select class="col-xs-10 col-sm-5" name="destDsId" id="destDsId" datatype="require" msg="请选择目的端数据源" require="true">
															<option value="">-请选择目的端数据源-</option>
															<c:forEach items="${dsData}" var="dsVo">
															 <option value="${dsVo.id}" dsType="${dsVo.type}" <c:if test='${dsVo.id eq vo.destDsId}'>selected</c:if> <c:if test="${vo.mappingType eq 1 &&dsVo.type ne 1 ||vo.mappingType eq 3 &&dsVo.type ne 2}">style="display: none;"</c:if> >${dsVo.name}</option>
															</c:forEach>
														</select>
													</div>
												</div>
												<div class="profile-info-row" style="height: 56px;">
													<div class="profile-info-name" style="padding-top: 10px;" >备注</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<textarea class="col-sm-5" placeholder="请输入备注"
														name="remark" id="remark" title="备注">${vo.remark}</textarea>
													</div>
												</div>
											</div>
											<div class="mg-top12" style="margin-left: 12px;">
												<button type="button" class="btn btn-success btn-xs" id="mappingRuleAddBtn" onclick="DataMappingRuleAdd()">
												  <i class="icon-plus-sign icon-on-right"></i> 添加映射规则&nbsp;&nbsp;
											    </button>
											    &nbsp;&nbsp;&nbsp;&nbsp;
											    <button type="button" class="btn btn-success btn-xs" id="realTimePreviewBtn" onclick="realTimePreview()">
												  <i class="icon-eye-open icon-on-right"></i> 实时预览&nbsp;&nbsp;
											    </button>
											</div>
											<div class="table-responsive mg-top12 mg-left12" id="mappingRuleList" style="margin-right: 12px;">
											    <span class="label label-primary arrowed-right arrowed-nn-right" >映射规则信息</span>
												<table class="table table-striped table-bordered table-hover mg-top12" style="margin-bottom:0px;">
													<thead>
														<tr>
															<th class="col-sm-1 center">序号</th>
															<th class="col-sm-8 center">映射规则</th>
															<th class="col-sm-1 center">操作</th>
														</tr>
													</thead>
													<tbody>
													     <c:forEach items="${funcMappings}" var="funVo" varStatus="status"> 
													    	<tr id="${funVo.id}" <c:if test="${funVo.funcIdentify.fxType ne '7'}"> tableName="${funVo.tableName}" actObj="${funVo.actObj}" </c:if> fxId="${funVo.fxId}" fxName="${funVo.funcIdentify.fxNameEn}" argContent='${funVo.argContent}' fxActOnType="${funVo.fxActOnType}">
													    		<td class="center">${status.index+1 }</td>
													    		<td id="tdId${status.index }">
													    		 <script type="text/javascript">
													    		   var tableName = "${funVo.tableName}";
													    		     var funcName = "${funVo.funcIdentify.fxNameEn}";
													    		 	 var fxActOnType = ${funVo.fxActOnType};
													    		 	 var actObj = "${funVo.actObj}";
													    		 	 var fxType = ${funVo.funcIdentify.fxType};
													    		 	 var iscommon = ${funVo.funcIdentify.iscommon};
											    			  	     var fxDesc = ${funVo.funcIdentify.fxDesc};
											    			  	     var mappingModel = fxDesc.mappingModel;
											    			  	     var argContent = "";
											    					 var addVrCol = '<%=FunctionAction.ADD_COL%>';
											    					 var removeCol = '<%=FunctionAction.REMOVE_COL%>';
											    					 var addPrefixToFileName = '<%=FunctionAction.ADD_PREFIX_TO_FILE_NAME%>';
										    						 var addSuffixToFileName = '<%=FunctionAction.ADD_SUFFIX_TO_FILE_NAME%>';
										    						 var setCurrentDate = '<%=FunctionAction.SET_CURRENTDATE%>';
											    					 var mappingType = '${vo.mappingType}';
											    					 if(funcName != addVrCol && mappingType != '3'){
											    						 argContent = eval(JSON.stringify(${funVo.argContent}));
											    					 }
											    					 if(mappingType == '1'){
														    		 	 if(fxActOnType == "1"){//表名
														    		 		 if(fxType == "1"){
														    		 			 if(iscommon == "0"){// 非普通函数 
															    			  	      if(funcName == "removeTable"){
															    			  	    	  var paramV = "\${arg1}";
																    			  	      mappingModel = mappingModel.replace(paramV,argContent[0].arg1);
																    			  	      $("#tdId"+${status.index}).text(mappingModel);
															    			  	      }
														    		 			 }
														    		 		 }
														    		 		 if(fxType == "2" || fxType == "3"){//表名
														    		 			 if(iscommon == "1"){
														    		 				 mappingModel = mappingModel.replace("\${arg1}",tableName);
														    			  	         $.each(argContent, function(key1, val1) {
														    			  	        	 var paramV = "\${arg"+(key1+2)+"}";
														    			  	        	 var descParam = "arg"+(key1+1);
														    			  	        	 var descStr = eval("val1."+descParam);
														    			  	        	 mappingModel = mappingModel.replace(paramV,descStr); 
														    			  	        });
														    			  	        $("#tdId"+${status.index}).text(mappingModel);
														    		 			 }
														    		 			 if(iscommon == "0"){
														    			  	         $.each(argContent, function(key1, val1) {
														    			  	        	 var paramV = "\${arg"+(key1+1)+"}";
														    			  	        	 var descParam = "arg"+(key1);
														    			  	        	 var descStr = eval("val1."+descParam);
														    			  	        	 if(key1 == 0){
														    			  	        		 mappingModel = mappingModel.replace("\${arg1}",eval("val1.tables"));
														    			  	        	 }else{
														    			  	        		mappingModel = mappingModel.replace(paramV,descStr); 
														    			  	        	 }
														    			  	        });
														    			  	        $("#tdId"+${status.index}).text(mappingModel);
														    		 			 }
														    		 		 }
														    		 	 }
																		 if(fxActOnType == "2"){//字段名
														    		 		 if(fxType == "4" ||fxType == "5"){
														    		 			 if(iscommon == "1"){
														    			  	     	mappingModel = mappingModel.replace("\${arg1}",tableName);
														    			  	     	mappingModel = mappingModel.replace("\${arg2}",actObj);
														    			  	        $.each(argContent, function(key1, val1) {
														    			  	        	var paramV = "\${arg"+(key1+3)+"}";
														    			  	        	var descParam = "arg"+(key1+1);
														    			  	        	var descStr = eval("val1."+descParam);
														    			  	        	mappingModel = mappingModel.replace(paramV,descStr); 
														    			  	        });
														    			  	        $("#tdId"+${status.index}).text(mappingModel);
														    		 			 }
														    		 			 if(iscommon == "0"){
														    		 				if(funcName == removeCol){
															    			  	         $.each(argContent, function(key1, val1) {
															    			  	        	 var paramV = "\${arg"+(key1+1)+"}";
															    			  	        	 var descParam = "arg"+(key1);
															    			  	        	 if(key1 == 0){
															    			  	        		 mappingModel = mappingModel.replace("\${arg1}",eval("val1.tables"));
															    			  	        	 }else{
																    			  	        	 var descStr = eval("val1."+descParam);
																    			  	        	 mappingModel = mappingModel.replace(paramV,descStr); 
															    			  	        	 }
															    			  	        });
															    			  	        $("#tdId"+${status.index}).text(mappingModel);
															    			  	    }
														    		 				if(funcName == addVrCol){
														    		 					mappingModel = mappingModel.replace("\${arg1}",tableName);
															    			  	     	mappingModel = mappingModel.replace("\${arg2}",actObj);
															    			  	     	argContent = $.parseJSON(JSON.stringify(${funVo.argContent}));
															    			  	     	var vrType = argContent.vrType;
															    			  	     	var fxName = argContent.fxName;
															    			  	     	if(vrType == "0"){
															    			  	     		mappingModel = mappingModel.replace("\${arg3}","设置值");
															    			  	     		argContent = argContent.args;
																    			  	     	argContent = eval(JSON.stringify(argContent)); 
																    			  	     	var vrArg = "";
																    			  	     	if(argContent.length > 0){
																    			  	     		vrArg = argContent[0].arg1;
																    			  	     	}
																    			  	     	mappingModel = mappingModel.replace("\${arg4}",fxName+vrArg)
															    			  	     	}else{
															    			  	     		mappingModel = mappingModel.replace("\${arg3}","字段值计算");
															    			  	     		if(fxName == "" || fxName == null){
															    			  	     			mappingModel = mappingModel.replace("\${arg4}","字段值相等");
															    			  	     		}else{
																    			  	     		var vrRule = "";
																    			  	     		if(argContent.args != null){
																    			  	     			if(argContent.args.arg != null){
																    			  	     				vrRule = argContent.args.arg;
																    			  	     			}
																    			  	     		}
																    			  	     		mappingModel = mappingModel.replace("\${arg4}",fxName+vrRule);
															    			  	     		}
															    			  	     	}
															    			  	        $("#tdId"+${status.index}).text(mappingModel);
														    		 				}
														    		 				if(fxType == "5"){
															    			  	     	mappingModel = mappingModel.replace("\${arg1}",tableName);
															    			  	        $.each(argContent, function(key1, val1) {
															    			  	        	var paramV = "\${arg"+(key1+2)+"}";
															    			  	        	var descParam = "arg"+(key1+1);
															    			  	        	var descStr = eval("val1."+descParam);
															    			  	        	mappingModel = mappingModel.replace(paramV,descStr); 
															    			  	        });
															    			  	        $("#tdId"+${status.index}).text(mappingModel);
														    		 				}
														    		 			 }
														    		 		 }
														    		 	 }
																		 if(fxActOnType == "3"){//字段值
														    		 		 if(fxType == "6"){
														    		 			 mappingModel = mappingModel.replace("\${arg1}",tableName);
														    		 			mappingModel = mappingModel.replace("\${arg2}",actObj);
													    			  	         $.each(argContent, function(key1, val1) {
													    			  	        	 var paramV = "\${arg"+(key1+3)+"}";
													    			  	        	 var descParam = "arg"+(key1+1);
													    			  	        	 var descStr = eval("val1."+descParam);
													    			  	        	 mappingModel = mappingModel.replace(paramV,descStr); 
													    			  	        });
													    			  	        $("#tdId"+${status.index}).text(mappingModel);
														    		 		 }
														    		 	 }
											    					 }
											    					 if(mappingType == '3'){
											    						 if(fxActOnType == "4"){//文件名
											    							 if(fxType == "7"){	
											    								 argContent = eval(JSON.stringify(${funVo.argContent}));
											    								 if(funcName ==addPrefixToFileName || funcName == addSuffixToFileName){
											    									 var fileAddMethod = argContent[1].fileAddMethod;
											    									 if(fileAddMethod == 0){
											    										 mappingModel = mappingModel.replace("\${arg1}","自定义"); 
											    										 paramV = "\${arg2}";
											    										 descStr = argContent[0].arg1;
															    			  	       mappingModel = mappingModel.replace(paramV,descStr); 
											    									 }else{
											    										 var dateFormat = argContent[2].dateFormat;;
											    										 mappingModel = mappingModel.replace("\${arg1}","设置默认值"); 
											    										 if(dateFormat !='' && dateFormat != null && dateFormat != "undefined"){
											    											 mappingModel = mappingModel.replace("\${arg2}","系统时间");
											    											 mappingModel = mappingModel+"日期格式为"+dateFormat+"。";
											    										 }else{
											    											 mappingModel = mappingModel.replace("\${arg2}","");
											    										 }
											    									 }
											    								 }
													    			  	         $.each(argContent, function(key1, val1) {
													    			  	        	 var paramV = "\${arg"+(key1+1)+"}";
													    			  	        	 var descParam = "arg"+(key1+1);
													    			  	        	 var descStr = eval("val1."+descParam);
													    			  	        	 mappingModel = mappingModel.replace(paramV,descStr); 
													    			  	        });
													    			  	        $("#tdId"+${status.index}).text(mappingModel);
											    							 }
										    							 }
											    					 }
											    			  	  </script>
													    		</td>
													    		<td class="center">
											    					<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
											  				  		<a class="red" href="javascript:void(0)" onclick="deleteFxMapping(this);" title="删除">
															   			<i class="icon-trash bigger-130"></i>
															  		</a>
																	</div>
													    		</td>
													    	</tr>
													    </c:forEach>
													</tbody>
												</table>
											</div>

											<div class="mg-top12" id="realTimePreview">
												<span class="label label-primary arrowed-right arrowed-nn-right" style="margin-left: 12px;">实时预览结果</span>
												<div class="row" style="margin-left: 0px; margin-right: 0px;margin-top: 10px;">
													<div class="col-xs-12">
														<div class="widget-box">
															<div class="widget-header widget-header-flat text-center">
															<!-- 	<div class="widget-toolbar no-border"> -->
																
																	<select style="margin-top:4px;width: 200px;" id="mappingSelectObject" onchange="changeMappingTable($('#mappingSelectObject').val())">
																		<option>请选择</option>
																		<option>1</option>
																	</select>
																	<span class="mg-left12" id="mappingTableIndex">1/2</span>
															<!-- 	</div> -->
															</div>
														</div>
														<div class="widget-body" style="margin-top: -3px;">
															<div class="widget-main">
																<div class="row" id="previewTable">
																	<div class="table-responsive mg-left12 pull-left"
																		id="befMapTab">
																		<span>原数据结构：<span id="mappingBeforeTabName">USERINFO</span></span>
																		<table
																			class="table table-striped table-bordered table-hover mg-top12"
																			style="width: 480px;">
																			<thead>
																				<tr>
																					<th class="">序号</th>
																					<th class="">项(英文名)</th>
																					<th class="">项(中文名)</th>
																					<th class="">类型</th>
																					<th class="">默认值</th>
																				</tr>
																			</thead>
																			<tbody>
																			
																			</tbody>
																		</table>
																	</div>
																	<div id="arrowID"
																		style="margin-top: 100px; margin-left: 34px;margin-right: 34px;"
																		class=" pull-left">
																		<div class="row">
																			<img alt=""
																				src="${ctx}/static/images/datamapping/arrows.png"
																				width="40px;">
																		</div>
																		<div class="row mg-top12 label label-sm label-success" id="ifIsomorphismFont">
																			<span class="" style="color: white; font-size: 14px;"><b>异构</b></span>
																		</div>


																	</div>
																	<div class="table-responsive  pull-left" id="afterMapTab">
																		<span>映射后结构：<span id="mappingAfterTabName">T_SUPT_USERINFO</span></span>
																		<table
																			class="table table-striped table-bordered table-hover mg-top12" style="width: 480px;">
																			<thead>
																				<tr>
																					<th class="">序号</th>
																					<th class="">项(英文名)</th>
																					<th class="">项(中文名)</th>
																					<th class="">类型</th>
																					<th class="">默认值</th>
																				</tr>
																			</thead>
																			<tbody>
																			
																			</tbody>
																		</table>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
												<div class="clearfix form-group mg-top12" id="sbmDiv">
													<div align="center">
														<button type="submit" class="btn btn-sm btn-info"
															id="sbmBtn" onclick="updateBtn()"><i class="icon-ok bigger-110"></i>提交</button>
													</div>
												</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<div id="dataMappingRuleAddModal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="查看" aria-hidden="false">
	<div class="modal-dialog" style="padding-top: 90px;width: 800px;">
		<div class="modal-content" style="width: 800px;">
		<div class='widget-header widget-header-small'><h6 class='smaller'> 添加映射规则</h6></div>
		<div id="dataMappingRuleAddDiv"></div>
		</div>
	</div>	
</div>
<div id="dataMappingChooseModal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="查看" aria-hidden="false">
	<div class="modal-dialog" style="margin-top: 34px;width: 800px;">
		<div class="modal-content mg-top12" style="width: 800px;margin-top: 70px;">
		<!-- <div class='widget-header widget-header-small'><h6 class='smaller'> 选择映射规则</h6></div> -->
		<div id="dataMappingChooseDiv" ></div>
		</div>
	</div>	
</div>
</body>
</html>